<template>
  <div>
    <el-dialog
      :modal="false"
      title="拍摄照片"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="696px"
      top="15vh"
    >
      <div v-loading="tableLoading" style="width:100%;height:100%">

        <video v-if="!flag" id="videoCamera" width="640" height="250" autoplay />
        <el-row v-else style="height:240px">
          <el-col :span="24" align="center">
            <div class="photo_pai">
              <img :src="imgSrc" alt="" class="tx_img">
            </div>
          </el-col>
        </el-row>
        <el-row v-if="resphoto" style="margin-bottom:10px">
          <el-col :span="24">
            <div class="relase_photo">
              <div v-for="(item, index) in tablelist" :key="index" style="margin-top:10px">
                <div v-if="tablelist.length>1" class="student">
                  <span align="right" class="st_title">学生姓名：</span><el-radio v-model="radioname" style="margin-right:0px;margin-top:4px" :label="item.student.id">{{ '' }}</el-radio><span class="st_name">{{ item.student.name }}</span>
                </div>
                <div v-else class="student">
                  <span align="right" class="st_title">学生姓名：</span><span class="st_name">{{ item.student.name }}</span>
                </div>
                <div class="calssstudent">
                  <span class="st_title">签到课程：</span>
                  <div v-if="item.courses !== null" style="display: flex;flex-direction:column">
                    <span v-for="(jtem,jndex) in item.courses" :key="jndex" class="st_classname">
                      <p v-if="tablelist.length>1" class="classname">
                        <el-radio v-model="radio" :disabled="radioname!==item.student.id || Boolean(jtem.checkInTime)" :label="jtem"><span class="size_title">{{ jtem.className }} _ {{ jtem.courseName }}</span></el-radio>
                      </p>
                      <p v-else class="classname">
                        <el-radio v-model="radio" :disabled="Boolean(jtem.checkInTime)" :label="jtem"><span class="size_title">{{ jtem.className }} _ {{ jtem.courseName }}</span></el-radio>
                      </p>
                      <p v-if="jtem.checkInTime" class="timename" style="margin-left:12px;margin-top:1px">
                        {{ '已签到时间' }} {{ jtem.checkInTime | FormatDate('yyyy-MM-dd') }} {{ jtem.checkInTime | FormatDate('HH:mm') }}
                      </p>
                    </span>
                  </div>
                  <div v-else>
                    <p class="classname">
                      {{ '暂无课程' }}
                    </p>
                  </div>

                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <canvas id="canvasCamera" style="display:none;" width="300" height="300" />

      </div>
      <span v-if="!resphoto" slot="footer" class="dialog-footer">
        <el-button :loading="tableLoading" @click="stopNavigator()">关闭摄像头</el-button>
        <el-button :loading="tableLoading" @click="setImage()">拍照</el-button>
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-button :loading="tableLoading" @click="reset()">重新拍照</el-button>
        <el-button :loading="tableLoading" @click="toClass()">签到</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { api_POST_ClubFaceSearch } from '@/extend/api/hallswaggerApi/app.js';
import { SearchFacesInput, Api_GET_ClubStudentQO } from '@/lib/form/hall/swaggerForm';
// import { api_Post_UploadFileAddHeader } from '@/extend/api/file';
export default {
  data() {
    return {
      radioname: '',
      radio: {},
      tableLoading: false,
      Api_GET_ClubStudentQO: new Api_GET_ClubStudentQO(),
      SearchFacesInput: new SearchFacesInput(),
      flag: false,
      resphoto: false,
      dialogVisible: false,
      imgSrc: '',
      importAction: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`,
      tablelist: []
    };
  },
  watch: {
    dialogVisible: {
      handler(flag) {
        if (!flag) {
          this.flag = false;
          this.resphoto = false;
          this.radio = {};
          this.$parent.thisVideo.srcObject.getTracks()[0].stop();
          window.mediaStreamTrack && window.mediaStreamTrack.stop();
        }
      }
    },
    radioname: {
      handler() {
        this.radio = {};
      }
    }
  },
  methods: {
    submitImg() {},
    //  绘制图片（拍照功能）
    setImage () {
      this.tableLoading = true;
      var _this = this;
      // 点击，canvas画图
      _this.$parent.thisContext.drawImage(_this.$parent.thisVideo, 0, 0, 300, 300);
      // 获取图片base64链接
      var image = this.$parent.thisCancas.toDataURL('image/png');
      _this.imgSrc = image;
      console.log(_this.imgSrc);
      const file = this.dataURLtoFile(_this.imgSrc, 'xue.png');
      console.log(file);
      this.flag = true;
      this.SearchFacesInput.base64Image = _this.imgSrc.split('data:image/png;base64,')[1];
      this.SearchFacesInput.limit = 2;
      this.SearchFacesInput.includeCourses = true;
      // this.SearchFacesInput.minScore = 0.2;
      api_POST_ClubFaceSearch(this.SearchFacesInput).then(res => {
        console.log(res);
        if (res.items.length === 0) {
          this.$message({
            message: '没有匹配到学员，请重新拍照',
            type: 'warning'
          });
          this.tableLoading = false;
          this.reset();
          return;
        }
        // if (res.items.length === 1 && res.items[0].courses.length === 1) {
        //   const _json = {};
        //   this.tableLoading = true;
        //   _json.studentId = res.items[0].student.id;
        //   _json.courseScheduleId = res.items[0].courses[0].courseScheduleId;
        //   this.$parent.photoSignIn(_json);
        //   return;
        // }
        this.resphoto = true;
        this.tablelist = res.items;
        this.radioname = res.items[0].student.id;
        setTimeout(() => {
          if (res.items[0].courses !== null) {
            this.radio = res.items[0].courses[0];
          }
          this.tableLoading = false;
        }, 500);
      }, error => {
        this.tableLoading = false;
        this.resphoto = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // base64转文件
    dataURLtoFile (dataurl, filename) {
      var arr = dataurl.split(',');
      var mime = arr[0].match(/:(.*?);/)[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    // 关闭摄像头
    stopNavigator () {
      this.flag = false;
      this.dialogVisible = false;
      this.$parent.thisVideo.srcObject.getTracks()[0].stop();
      // window.mediaStreamTrack && window.mediaStreamTrack.stop();
    },
    // 重新拍照
    reset() {
      this.flag = false;
      this.resphoto = false;
      this.radio = {};
      this.$parent.thisVideo.srcObject.getTracks()[0].stop();
      this.$parent.openphoto();
    },
    // 签到
    toClass() {
      if (this.radio.courseScheduleId === undefined) {
        this.$message({
          message: '请选择签到班级课程',
          type: 'warning'
        });
        return;
      }
      const _json = {};
      this.tableLoading = true;
      if (this.tablelist.length > 1) {
        _json.studentId = this.radioname;
      } else {
        _json.studentId = this.tablelist[0].student.id;
      }

      _json.courseScheduleId = this.radio.courseScheduleId;
      this.$parent.photoSignIn(_json);
    }
  }
};
</script>

<style scoped lang="scss">
.photo_pai, .photo_pai::before, .photo_pai::after {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

        .photo_pai {
          width: 201px;
          height: 201px;
          margin: auto;
        }
        .photo_pai::before, .photo_pai::after {
          content: '';
          z-index: 6;
          margin: -2%;
          box-shadow: inset 0 0 0 5px #1cb7e596;
          // box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,0.2), 0 16px 0 -6px #f6f6f6, 0 17px 1px -6px rgba(0,0,0,0.2);
          animation: clipMe 8s linear infinite;
        }
        .photo_pai::before {
          // color: #2be991b8;
          animation-delay: -4s;
        }
        .photo_pai:hover::after, .photo_pai:hover::before {
          background-color: rgba(255, 0, 0, 0.3);
        }

        @keyframes clipMe {
          0%, 100% {
            clip: rect(0px, 220.0px, 2px, 0px);
          }
          25% {
            clip: rect(0px, 2px, 220.0px, 0px);
          }
          50% {
            clip: rect(218.0px, 220.0px, 220.0px, 0px);
          }
          75% {
            clip: rect(0px, 220.0px, 220.0px, 218.0px);
          }
        }
        .tx_img {
          width: 100%;
          height: 100%;
          box-shadow:0 0 10px #1587f1;
        }
// .relase_photo{
//   // display: flex;

// }
.student {
  display: flex;
  align-items: center;
}
.calssstudent {
  display: flex;
}
.relase_photo>div{
   width: 100%;
}
.st_title {
  font-size: 16px;
  font-weight: 800;
  color: #4f4a4a;
  margin-left:2px;
  display: inline-block;
  width: 160px;
  text-align: right;
  height: 20px;
  line-height: 24px;

}
.st_name {
  display: inline-block;
  width: 270px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 900;
  color: #b1b0ad;
  line-height: 31px;
  height: 26px;

}
.st_classname {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 900;
  color: #b1b0ad;
  line-height: 14px;
  height: 26px;
}
.classname {
  width: 205px;
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
}
.size_title {
  display: inline-block;
    width: 185px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timename {
    font-size: 12px;
  font-weight: 900;
  color: #b1b0ad;
}
</style>

